<template>
  <div>
    <div class="userInfo" v-show="isshow"  @>
      <img :src="user.avatar" alt="" >
      <span>{{user.name}}</span>
    </div>
    <div class="chatArea">
      <div class="left">
        <img :src="user.avatar" alt="" class="user-avatar"  @mouseover="isshow=true" @mouseleave="isshow=false"/>
      </div>
      <div class="center">
         <div class="group">芜湖男同聊天群</div>
         <div style="color:sandybrown;fontSize:20px">男同成员</div>
         <ul style="padding:0">
           <li v-for="item in chatInfo" :key="item.name" class="users">
             <img :src="item.avatar" alt="">
             <span>{{item.name}}</span>
           </li>
         </ul>
      </div>
      <div class="right" >
        <span>当前人数:{{chatInfo.length}}</span>
        <ul  class="chatgroud" v-show="msgList.length"  ref="right">
          <li v-for=" (item,index) in msgList" :key="index" :class="item.type?item.type:item.user.name==user.name?'self':'other'">
           
               <div v-if="item.user">
                      <div style="margin-left:5px;display:flex;font-size:15px
                      "> {{item.user.name}} 
                        <img :src="item.user.avatar" alt="" style="width:50px;height:50px">
                     </div>
               </div>
                <div class="msg" ><span v-if="item.msg">{{item.msg}}</span></div>
                 <img :src="item.url" alt="img" v-if="item.url" >
            
            </li> 
        </ul>
        <div class="emoji">
          <button @click="emojiShow = !emojiShow">表情</button>
           <div class="emojiList" tabindex="1" v-show="emojiShow" @blur="handleEmojiBlur">
            <span
              v-for="item in emojiList"
              :key="item.codes"
              @click="handleEmoji(item)"
            >{{item.char}}</span>
          </div>
            <label class="iconfont icon-wenjianjia" for="file">文件</label>
       <input type="file" style="display:none" id="file" @change="handleFile" />
  
        </div>
          <div class="sendground">
            <input type="text" v-model="sendedmsg" @keyup.enter="sendmsg">
           <div @click="sendmsg()">发送</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import emoji from '../assets/emoji.json'
export default {
  data() {
   
    return {
      user: {},
      chatInfo: {},
      isshow:false,
      msgList:[],
      sendedmsg:'',
      emojiList:'',
      emojiShow:false
    };
  },
  created() {
    this.emojiList=emoji
    this.user = JSON.parse(sessionStorage.getItem("user"));
    this.$socket.emit("login", this.user);
    this.$socket.on("loginSuccess", (data) => {
      this.chatInfo = data;
    });
    this.$socket.on("receiveMessage",(data)=>{
       this.msgList.push(data)
 
    })
    this.$socket.on("listenPerson",(data)=>{
      this.chatInfo=data
    })
      this.$socket.on("receiveImage",(data)=>{

          console.log(data);
           this.msgList.push(data)
    })
  },
  beforeDestory(){

  }, 
  updated() {
    // 聊天定位到底部
    this.handleScrollBottom()
  },
 methods:{
    sendmsg(){
    //  this.msgList.push({type:'self',msg:this.sendedmsg})
    if(this.sendedmsg.length==0){
      alert('请输入信息')
      return
    }
      this.$socket.emit("message",{user:this.user,
      msg:this.sendedmsg
      })
     this.sendedmsg=''
    
  },
  handleFile(e){
      const file = e.target.files[0]
      console.log(1);
      const reader = new FileReader() // 创建读取文件对象
      reader.readAsDataURL(file) // 发起异步请求，读取文件
      reader.onload = (e) => {
        // 文件读取完成后
        // 读取完成后，将结果赋值给img的src
         this.$socket.emit('handleFile', {
          user:this.user,
          url:e.target.result
        })
      }
  },
   handleScrollBottom() {
      const ul = this.$refs.right
      ul.scrollTop = ul.scrollHeight
    },
    handleEmojiBlur(){
        
    },
    handleEmoji(emoji){
      this.emojiShow=!this.emojiShow
     this.sendedmsg += emoji.char
    }
 }
};
</script>
<style scoped>
ul{
  padding: 0;
}
li {
  list-style: none;
}
.chatArea {
  margin: 0 auto;
  width: 800px;
  height: 600px;
  background-color: white;
  display: flex;
}
.left {
  width: 60px;
  height: 100%;
  background-color: black;
}
.left .user-avatar {
  display: block;
  margin: 0 auto;
  width:30px;
  margin-top: 10px;
}
.center {
  width: 60px;
  width: 300px;
  height: 100%;
  background-color: rgb(238, 234, 232);

}
.center .group{
  width: 100%;
  height: 80px;
  border: 3px solid rgba(123,35,123,0.3);
  text-align: center;
  line-height: 80px;
  font-size: 30px;
  color: sandybrown;
}
.center .group:hover{
  background-color: aqua;
}
.center .users{
padding: 0;
width: 100%;
height: 80px;
border-bottom: 1px solid gainsboro;
 list-style: none;
 font-size: 20px;
 color: sandybrown;
}
.center .users img{
  margin-top: 25px;
  margin-right: 100px;
  width: 50px;
}
.right {
  flex: 1;
  background-color: rgb(245, 245, 245);
  
}
.right .chatgroud{
  height: 400px;
 overflow-y: auto;
}
.right .sendground input{
  width: 90%;
  height: 100px;
}
.right .sendground div{
   margin-left: 90%;
   background-color: goldenrod;
   color: white;
   border-radius: 3px;
   text-align: center;
}
.userInfo {
  position: absolute;
  left: 70px;
  width: 300px;
  height: 150px;
  background: white;
  font-size: 30px;
  color: burlywood;
}
.userInfo img{
  margin: 20px; 
  width: 100px;
}
.system{
  color: red;
}
.self{
     color: burlywood;
     font-size: 20px;

}
.self div:nth-child(1){
   margin-left: 70%;
}
.self .msg {
  margin-left: 120px;
  color:black;
   padding: 5px;
   border-radius: 50px;
   word-wrap:break-word ;
   text-align: right;
}
.self .msg span{
     background-color: greenyellow;
}
.other{
     color: burlywood;
     font-size: 20px;
}
.other .msg{
    width: 260px;
  color:white;
  padding: 5px;
   background-color: blueviolet;
   border-radius: 25px;
   text-align: left;
   word-wrap:break-word ;
}
.emoji button{
  margin-right: 10px;
}
.emojiList {
  position: absolute;
}
.right 
.right img{
  width:200px;
  height: 200px;
 
}
</style>